<template>
    <section class="topbar">
        <div class="white-bg topbar-bg ">
            <div class="city-entry">
                <span class="city-name" @click="tocity">{{this.Cityname}}</span>
                <i class="city-entry-arrow"></i>
            </div>
            <div class="switch-hot" :style="{'--left': leftstyle}" data-active=".n-hot">
                <!-- <router-link v-for="(items,index) in items" :key="index" :to="items.href" class="hot-item" active-class="active" :data-tab="items.sym" tag="a">
                <h2>{{items.name}}</h2>
                </router-link> -->
                <router-link to="/Film/Nowplaying" @click.native="changelefta" class="hot-item" active-class="active" data-tab=".n-hot" tag="a">
                <h2>热映</h2>
                </router-link>
                <router-link to="/Film/Cinema" @click.native="changeleftb" class="hot-item" active-class="active" data-tab=".cinema" tag="a">
                <h2>影院</h2>
                </router-link>
                <router-link to="/Film/Comingsoon" @click.native="changeleftc" class="hot-item" active-class="active" data-tab=".f-hot" tag="a">
                <h2>待映</h2>
                </router-link>
                <router-link to="/Film/Classic" @click.native="changeleftd" class="hot-item" active-class="active" data-tab=".classic" tag="a">
                <h2>经典电影</h2>
                </router-link>
                <!-- <a href="" class="hot-item active" data-tab=".n-hot">
                    <h2>热映</h2>
                </a> -->
                <!-- <a href="" class="hot-item " data-tab=".cinema">
                    <h2>影院</h2>
                </a> -->
                <!-- <a href="" class="hot-item " data-tab=".f-hot">
                    <h2>待映</h2>
                </a> -->
                <!-- <a href="" class="hot-item " data-tab=".classic">
                    <h2>经典电影</h2>
                </a> -->
            </div>
            <div @click="gosearch" class="search-entry search-icon"></div>
        </div>
    <!-- <navbarcopy></navbarcopy> -->
    </section>
</template>
<style scoped>
.topbar {
    border-bottom: 1px solid #e6e6e6;
    height: 45px;
}
.white-bg {
    background-color: #fff;
}
.topbar-bg {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 44px;
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.city-entry {
    padding-left: 15px;
    font-size: 15px;
    color: #666;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
.city-entry .city-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
    max-width: 19.2vw;
}
.switch-hot .hot-item[data-tab=".classic"] {
    width: 80px;
    width: 21.33333vw;
}
.city-entry-arrow {
    width: 0;
    height: 0;
    border: 4px solid #b0b0b0;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    display: inline-block;
    margin-left: 4px;
    margin-top: 5px;
}
.switch-hot {
    display: -webkit-box;
    display: flex;
    height: 44px;
    line-height: 44px;
    position: relative;
    justify-content: space-around;
}
.switch-hot .hot-item.active {
    color: #333;
}
.switch-hot .hot-item {
    font-size: 15px;
    color: #666;
    width: 40px;
    width: 10.66667vw;
    text-align: center;
    margin: 0 5px;
    margin: 0 1.33333vw;
    font-weight: 700;
}
/* .switch-hot:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 1px;
    width: 20px;
    width: 5.33333vw;
    border-radius: 1px;
    height: 3px;
    background-color: #f03d37;
    -webkit-transition: left .2s;
    transition: left .2s;
} */
.switch-hot[data-active=".n-hot"]:after {
    left: var(--left);
}
.switch-hot .hot-item h2 {
    display: inline;
    font-size: 15px;
    font-weight: 700;
}
.switch-hot .hot-item.active h2 {
    font-size: 17px;
}
.switch-hot .hot-item h2 {
    display: inline;
    font-size: 15px;
    font-weight: 700;
}
.search-icon {
    width: 20px;
    height: 20px;
    background: url() no-repeat;
    background-size: 20px;
    padding: 10px 15px 10px 10px;
    background-position: 10px;
}
a, img {
    display: block;
}
</style>
<script>
import { mapMutations, mapState } from 'vuex'
// import navbarcopy from '../../components/Navbarcopy.vue'
export default {
//   components: { navbarcopy },
  data () {
    return {
      leftstyle: '4vw'
    }
  },
  computed:{
      ...mapState('City',['Cityname'])
  },
  methods: {
      ...mapMutations('Cinemalist',['clearcinema']),
    changelefta () {
    //   console.log(1)
      this.leftstyle = '4vw'
    },
    changeleftb () {
    //   console.log(1)
      this.leftstyle = '17.33333vw'
    },
    changeleftc () {
    //   console.log(1)
      this.leftstyle = '30.66667vw'
    },
    changeleftd () {
    //   console.log(1)
      this.leftstyle = '49.33333vw'
    },
    tocity () {
      this.$router.push('/City')
      this.clearcinema()
    },
    gosearch () {
      this.$router.push('/Film/Cinema/Search')
    }
  }
}
</script>
